<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>test</title>
		<style type="text/css">
			.errInfo{color: red; font-size: 12px;}
			.errInfo img{ vertical-align:middle;}
		</style>
 		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	</head>
	<body>
		<form action="Demo12_01.html" >
		<table width="1000" align="center">
			<caption>用户注册</caption>
			<tr>
				<td width="300" align="right" height="30">用户名:</td>
				<td width="700"><input type="text" id="txtAccount" >
					<span id="spanAccount" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">密码:</td>
				<td width="700"><input type="password" id="txtPwd" >
					<span id="spanPwd" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">密码确认:</td>
				<td width="700"><input type="password" id="txtPwdOk" ">
					<span id="spanPwdOk" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">性别:</td>
				<td width="700">
					<input type="radio" name="sex" id="rdBoy" value="男" >男
					<input type="radio" name="sex" id="rdGirl" value="女" >女	
					<span id="spanSex" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">专业:</td>
				<td width="700">
					<select id="selProfessional" >
						<option value="">--请选择--</option>
						<option value="软件开发">软件开发</option>
						<option value="电子商务">电子商务</option>
						<option value="国际贸易">国际贸易</option>
						<option value="工商管理">工商管理</option>
						<option value="高级护理">高级护理</option>
					</select>
					<span id="spanProfessional" class="errInfo"></span>
				</td>
			</tr>			
			<tr>
				<td width="300" align="right" height="30">爱好:</td>
				<td width="700" >
					<input type="checkbox" name="hobby" value="抽烟" />抽烟
					<input type="checkbox" name="hobby" value="喝酒" />喝酒
					<input type="checkbox" name="hobby" value="打游戏" />打游戏
					<input type="checkbox" name="hobby" value="烫头发" />烫头发
					<input type="checkbox" name="hobby" value="足球" />足球
					<input type="checkbox" name="hobby" value="篮球" />篮球
					<span id="spanHobby" class="errInfo"></span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">自我介绍:</td>
				<td width="700">
					<textarea id="mySelf" rows="10" cols="60"></textarea>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">&nbsp;</td>
				<td width="700">
					<input type="submit" value="注册" />
					<input type="reset" value="取消" />
				</td>
			</tr>
		</table>
		</form>
<script>

	$('#txtAccount').focus(	
		function () {
			$('#txtAccount').val() == '' ? $('#spanAccount').text('未输入用户名X-X') : $('#spanAccount').text('√');
		}
	).blur(
		function () {
			var len = $('#txtAccount').val().length;
			$('#txtAccount').val() == '' ? $('#spanAccount').text('未输入用户名X-X') : 
			len<7 || len>16 ? $('#spanAccount').text('长度应在8~16位') : $('#spanAccount').text('√');
		}
	)

	$('#txtPwd').focus(	
		function () {
			$('#txtPwd').val() == '' ? $('#spanPwd').text('未输入密码X-X') : $('#spanPwd').text('√');
		}
	).blur(
		function () {
			var len = $('#txtPwd').val().length;
			$('#txtPwd').val() == '' ? $('#spanPwd').text('未输入密码X-X') : 
			len<7 || len>16 ? $('#spanPwd').text('长度应在8~16位') : $('#spanPwd').text('√');
		}
	)

	$('#txtPwdOk').focus(	
		function () {
			$('#txtPwdOk').val() == '' ? $('#spanPwdOk').text('未输入确认密码X-X') : $('#spanPwdOk').text('√');
		}
	).blur(
		function () {
			var pwd = $('#txtPwd').val();
			$('#txtPwdOk').val() == '' ? $('#spanPwdOk').text('未输入确认密码X-X') : 
			$('#txtPwdOk').val() != pwd ? $('#spanPwdOk').text('密码不一致X-X') : $('#spanPwdOk').text('√');
		}
	)

	var count = 0;
	var hobbySum = 0;

	$('input').eq(11).click(
		function (event) {
			var e = event || window.event;

			if ($('#rdBoy:checked').val() == undefined && $('#rdGirl:checked').val() == undefined) {
				$('#spanSex').text('未选择性别OAO');
				count++;
			}else{
				$('#spanSex').text('');
			}

			if ($('option:selected').val() != '') {
				$('#spanProfessional').text('√');
			}else{
				$('#spanProfessional').text('未选择专业X-x');
				count++;
			}
					
			$(':checkbox').each(
				function () {
					if ($(this).is(':checked') == true) {
						$('#spanHobby').text('√');
						hobbySum++;
					}
				}
			)
			if (hobbySum == 0) {
				$('#spanHobby').text('至少选择一个爱好X(');
				count++;
			}

			$('textarea').val() == '' ? alert('自我介绍不能为空O皿O') : '';
			
			if ($('#spanAccount').text() == '√' && $('#spanPwd').text() == '√' && $('#spanPwdOk').text() == '√') {
				count++;
			}

			count == 5 ? alert('注册成功OvO') : e.preventDefault();
		}

	)

</script>		
	</body>
</html>